<template>
  <div>
    <Form ref="formInline" :model="map" inline>
      <div class="search">
        <FormItem>
          <Upload
            action=""
            :before-upload="handleUpload">
            <Button icon="ios-cloud-upload-outline">增加图片</Button>
          </Upload>
        </FormItem>

        <FormItem>
          <Input type="text" v-model="map.key" placeholder="关键字"></Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="getList">查询</Button>
        </FormItem>
      </div>
    </Form>
    <Table border stripe :loading="loading" :columns="columns" :data="data && data.data" :height="500"></Table>
    <Page class="page" :total="data && data.count" :page-size="data && data.pagesize" show-total @on-change="changePage"></Page>

  </div>
</template>
<script>
  import {image} from "@/api";
  import {Button, Table, Page, Form, FormItem, Input, Upload} from 'iview';

  export default {
    components: {
      Button,
      Table,
      Page,
      Form,
      FormItem,
      Input,
      Upload
    },
    data() {
      return {
        loading: true,
        columns: [
          {
            title: "代码",
            key: "id",
            width: 80,
          },
          {
            title: "域名",
            key: "base_url",
            width: 250,
          },
          {
            title: "路径",
            key: "path",
            render: (h, params) => {
              return h('a', {attrs: {href: params.row.base_url + params.row.path, target: '_blank'}}, params.row.path);
            }
          },
          {
            title: "MD5校验值",
            key: "md5",
            width: 300,
          },
          {
            title: "发布时间",
            key: "create_time",
            width: 200,
            align: "center",
            render: (h, params) => {
              if (!params.row.create_time) return "";
              return h('span', new Date(params.row.create_time * 1000).toLocaleString());
            }
          },
          {
            title: "操作",
            key: "action",
            width: 150,
            align: "center",
            render: (h, params) => {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      size: "small",
                      icon: 'trash-a'
                    },
                    on: {
                      click: () => {
                        if (confirm("确定要删除吗？")) {
                          this.delete(params.row.id, params.index);
                        }
                      }
                    }
                  }, '删除')
              ]);
            }
          }
        ],
        data: {},
        map: {
          page: 1,
          storage: '',
          key: "",
          pageSize: 10,
        },
      };
    },
    methods: {
      async handleUpload($file) {
        let formdata = new FormData();
        formdata.append('file', $file);//七牛云单一文件上传必须使用token,file作为key
        await image.upload(formdata).then(res => {
          // console.log(res);
          if (res.errno === 0 && res.data.base_url && res.data.path) {
            this.getList();
          }
        });
        return false;
      },
      getList() {
        this.loading = true;
        image.getList(this.map).then(res => {
          this.data = res.data;
          this.loading = false;
        });
      },
      delete(id, index) {
        image.delete(id).then(res => {
          // this.data.splice(index, 1);
          this.getList();
        });
      },
      changePage(index) {
        this.map.page = index;
        this.getList();
      },
    },
    mounted() {
      this.getList();
    }
  };
</script>
